@include('header')
@include('template.banner')
<div class="container contactus">


    <div class="sub-nav-box">
        <div class="tit">
            联系我们 / <span>Contact us</span>
        </div>
        <div class="en-tit">如果您有法律上的事情咨询，请联系我们，我们将给您较好的帮助</div>
        <div class="sub-nav visible-md hidden-sm hidden-xs" id="subNav">

        </div>
    </div>
    <script type="text/javascript">
        var $subNav = $("#subNav");
        $subNav.children("ul").find("li").InitNav(168);


        $subNav = $("#subNav");
        $subNav.find("li[data-id='168']").addClass("active");
        var $subLis = $subNav.find("li");
        var $subLi = $subNav.find("li[data-id='168']");
        $subLis.each(function () {
            var $this = $(this);
            $this.children("a").on("mouseenter", function () {
                $subLis.removeClass("active");
                $this.addClass("active");
            })
        });
        $subNav.on("mouseleave", function () {
            $subLis.removeClass("active");
            $subLi.addClass("active");
        })
    </script>


    <div class="text-center padding-bottom-40 headline">
        <p class="callMe-text">
            客户利益至上是我们一贯恪守的执业准则，律师以优良的职业素养、勤勉职责的敬业精神、诚实信用的处事原则，为客户提供优质高效的专业法律服务，较大限度地维护和实现客户利益。为了更好地了解客户需求，不断改善服务质量和效率。
        </p>
    </div>

    <!--联系方式-->
    <div class="address row text-center">
        <div class="col-md-4 col-sm-4 padding-top-20">
            <img src="/Templates/T9910/images/address1.png" />
            <p>某某市某某区某某路10号某某中心某某三号楼第5层</p>
        </div>
        <div class="col-md-4 col-sm-4 padding-top-20">
            <img src="/Templates/T9910/images/address2.png" />
            <p>400-XXX-XXXX</p>
        </div>
        <div class="col-md-4 col-sm-4 padding-top-20">
            <img src="/Templates/T9910/images/address3.png" />
            <p>XXXX@qq.com</p>
        </div>
    </div>

    <div class="position-relative">
        <!--地图-->
        <div class="info-content">
            <script src="http://api.map.baidu.com/api?v=1.4"></script>
            <style>
                #mapbox{width: 100%;height: 400px;overflow: hidden;border: 1px solid #ccc;}
                @media (min-width:1000px){#mapbox{height: 350px;}}
                @media (max-width:1000px){#mapbox{height: 300px;margin-top: 20px;}}
            </style>
            <div id="mapbox"></div>
            <script>
                var map = new BMap.Map("mapbox");            // 创建Map实例，必须和地图容器id一致
                var point = new BMap.Point(113.295069, 22.722733); // 创建点坐标
                map.centerAndZoom(point, 16);                 // 初始化地图,设置中心点坐标和地图级别，最大19级
                map.enableScrollWheelZoom();                 //启用滚轮放大缩小
                map.addControl(new BMap.NavigationControl());
                map.addControl(new BMap.ScaleControl());
                map.addControl(new BMap.OverviewMapControl());
                var marker = new BMap.Marker(point);
                map.addOverlay(marker);
                var infoWinOpts = {}
                var sitetxt = "<div style='text-align:left;color:#333;line-height:25px;margin:0 auto;width:280px;'><li>地址：某某市某某区某某路10号某某中心某某三号楼第5层</li></div>";
                var infoWin = new BMap.InfoWindow(sitetxt, infoWinOpts);
                marker.openInfoWindow(infoWin);
                marker.addEventListener("click", function () { this.openInfoWindow(infoWin); });//注册点击事件
            </script>
        </div>
    </div>


    <!--资讯-->
    <div class="sub-nav-box addsubnav">
        <div class="tit">
            留言
        </div>
        <div class="en-tit">留下您的联系方式我们会在**时间联系您</div>
    </div>

    <!--需要先引用以下js文件，并保证每个页面只引用一次,多余脚本代码请自行优化或删除-->
    <link rel="stylesheet" href="/Incs/elementUi/2.13/element-ui.css" />

    <script src="/Incs/vue/2.6.11/vue.min.js?v=4.0.10" type="text/javascript"></script>
    <script src="/Incs/elementUi/2.13/element-ui.js" type="text/javascript"></script>
    <script src="/FrameUi/1.0/basic.js" type="text/javascript"></script>
    <script src="/FrameUi/1.0/ui.js" type="text/javascript"></script>
    <script src="/FrameUi/1.0/vueExtend.js" type="text/javascript"></script>
    <script src="/FrameUi/1.0/validateForm.js" type="text/javascript"></script>
    <script src="/Incs/UEditor/ueditor.config.js" type="text/javascript"></script>
    <script src="/Incs/UEditor/ueditor.all.min.js" type="text/javascript"></script>
    <style>
        .el-form-item__content .edui-default{line-height: 20px;}
        .el-form-item__label{float: inherit;}
        .el-input__inner,.el-textarea__inner{border: 1px dashed #aaa;background-color: #eee;}
        .el-form-item{margin-bottom: 12px;}
        .el-input.is-active .el-input__inner, .el-input__inner:focus ,.el-textarea__inner:focus{border-color: #0a1859;}
        .el-button--primary:focus, .el-button--primary:hover{background: #11247a;border-color: #11247a;}
        .el-button--small, .el-button--small.is-round{width: 100%;}
        .el-checkbox-group{border: 1px dashed #aaa;background-color: #eee;padding: 0 10px;border-radius: 4px;}
        .el-button--primary{background-color: #0a1859;border-color: #0a1859;}
        .el-checkbox{margin-right: 10px}
        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color: #0a1859;border-color: #0a1859;}
        .el-checkbox__input.is-checked + .el-checkbox__label{color: #0a1859;}
        @media (min-width:1000px){#FeedbackForm{padding: 0 300px;}}
    </style>
    <div id="FeedbackForm">
        <el-form label-position="left">

            <el-form-item label="姓名">
                <el-input type="text" ref="formData_Title" v-model="formData.Title" maxlength="150" class=""   v-validate="{data:formData.Title,dataType:'*',maxLength:150,min:1,nullMsg:'姓名不能为空!',ignoreHidden:true}" ></el-input>

                <span class="help-block"></span>
            </el-form-item>

            <el-form-item label="手机">
                <el-input type="text" ref="formData_Phone" v-model="formData.Phone" maxlength="150" class=""   v-validate="{data:formData.Phone,dataType:'*',maxLength:150,min:1,nullMsg:'手机不能为空!',ignoreHidden:true}" ></el-input>

                <span class="help-block"></span>
            </el-form-item>

            <el-form-item label="咨询">
                <ui-checkbox ref="formData_Consult" v-model="formData.Consult" :options='[{"label":"婚姻家庭","value":"1"},{"label":"金融资本","value":"2"},{"label":"陪同谈判","value":"3"},{"label":"公司企业","value":"4"},{"label":"知识产权","value":"5"},{"label":"诉讼&裁判","value":"6"}]'   v-validate="{data:formData.Consult,dataType:'*',maxLength:50,min:1,nullMsg:'请选择咨询',ignoreHidden:true}" ></ui-checkbox>

                <span class="help-block"></span>
            </el-form-item>

            <el-form-item label="内容">
                <el-input ref="formData_Content" type="textarea" v-model="formData.Content" class=""    :autosize="{ minRows: 4, maxRows: 8}"  v-validate="{data:formData.Content,dataType:'*',maxLength:2000,min:1,nullMsg:'内容不能为空!',ignoreHidden:true}" ></el-input>
                <span class="help-block"></span>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="small" v-on:click="postSubmit">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
    <script type="text/javascript">
        var FeedbackFormData ={"Id":"","ColumnId":"","State":"","IsGood":"","IsHot":"","IsTop":"","PublishFrom":"","IsOnline":"","IsExpire":"","HasThumbnail":"","Uid":"","Username":"","Clicks":"","Title":"","Thumbnail":"","Content":"","Thedate":"2021-02-24 10:29:38","Phone":"","Consult":""};
        FeedbackFormData.Guid = guid();
        FeedbackFormData.verificationCode = "";
        new Vue({
            el: "#FeedbackForm",
            data:{
                formData:FeedbackFormData
            },
            created: function () {

                this.formData.Guid = guid();
                this.formData.verificationCode = "";
            },
            methods: {
                postSubmit: function () {
                    var _this = this;
                    var validated = this.validateForm({ beforeSubmit: function () { return _this.beforeSubmitExecute() }});//表单验证
                    if (validated)
                    {
                        this.submit({ url: "/e/InfoData/Add?table=Feedback", data: _this.formData, showSuccessMsg: false, failCallback: _this.failSubmit, success: _this.submitSuccess});
                    }
                },
                beforeSubmitExecute:function(){

                    return true;
                },
                failSubmit:function ()
                {
                    var _this = this;
                    if (_this.$refs.verificationCodeImg != undefined) {
                        _this.$refs.verificationCodeImg.change();//改变验证码。
                    }
                },
                submitSuccess:function ()
                {
                    var _this = this;
                    //回调内容，以下内容可根据需求自行修改。
                    _this.formData.Guid = guid();//在有附属表的情况下，多次提交必须更新Guid属性值，否则附属表数据会混乱
                    //重置验证码
                    if (_this.$refs.verificationCodeImg != undefined) {
                        _this.$refs.verificationCodeImg.change();//改变验证码。
                    }
                    alert("提交成功,感谢您的支持!")
                    location.href = location.href;
                }
            },
        });

    </script>



</div>
@include('bottom')
